<!-- 基本信息 -->

<template>
  <el-form
    ref="formRef"
    :model="form.data"
    :disabled="form.status==='r'||form.submitting"
    :label-width="form.show&&isActive?'auto':undefined"
    class="commodity-form-module"
  >
    <el-form-item
      label="商品品类"
      prop="categoryId"
      verify
    >
      <CategorySelect
        v-model="form.data.categoryId"
        :parent-id="state.businessTypeId"
        placeholder="请选择商品分类"
        :status="2"
        :max-level="2"
        :check-strictly="false"
        class="category-select"
      />
    </el-form-item>
    <!-- 规则：必选 -->
    <!-- 关联影响：1. 非云景票务平台需要用户输入门票编码（productCode） 2. 云景票务平台当多场次预约时，需要使用云景的多场次预约规则（sessionList） -->
    <el-form-item
      v-if="state.businessTypeId==='1'"
      label="出票平台"
      prop="channelType"
      verify
    >
      <el-select
        style="width: 100%"
        v-model="form.data.channelType"
        filterable
        placeholder="请选择出票平台"
      >
        <el-option
          v-for="item in state.options.ticketChannel"
          :key="item.id"
          :label="item.channelName"
          :value="item.channelType"
        />
      </el-select>
    </el-form-item>
    <!-- 出票平台规则：必选, 1. 指定只能是云景票务，channelType === 1 -->
    <el-form-item label="出票平台" verify v-if="state.businessTypeId==='3'">
      <el-input
        disabled
        value="云景票务"
        placeholder="请输入出票平台"
      />
    </el-form-item>
    <el-form-item
      v-if="state.businessTypeId==='1' && state.options.channelInfo && state.options.channelInfo.existSetting"
      label="使用景区"
      prop="ticketSettingCode"
      verify
    >
      <el-select
        style="width: 100%"
        v-model="form.data.ticketSettingCode"
        filterable
        placeholder="请选择使用景区"
      >
        <el-option
          v-for="item in state.options.channelInfo.ticketSettings"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <!-- 规则：必选，1.最长45字符 2. 支持字母和数字和-符号 2. 当非云景票务平台时才展示-->
    <el-form-item
      prop="productCode"
      v-if="state.businessTypeId==='1' && form.data.channelType !== 1 && form.data.channelType !== 22"
      verify
    >
      <template #label>
        <span>票务编码 </span>
        <el-popover
          placement="top-start"
          title="填写说明"
          width="200"
          trigger="hover"
          content="请填写当前票务在票务系统中的票型编码"
        >
          <i
            class="el-icon-question"
            slot="reference"
            style="color: #409EFF;"
          />
        </el-popover>
      </template>

      <template #default>
        <el-input
          class="show-word-limit"
          v-model.trim="form.data.productCode"
          v-regex="/[^\w\-\|]/g"
          show-word-limit
          maxlength="200"
          type="text"
          placeholder="请输入出票平台的门票编码"
        />
      </template>
    </el-form-item>
    <!-- 规则：必选 -->
    <!-- 注：详情页时直接取getById返回的数据，新增 / 编辑通过getSubMerchantAll接口拉取商铺列表。
      原因：其它页面引用商品页，当登录的用户不是商品所属商铺的用户，会导致拉取的商铺列表和id匹配不上
    -->
    <el-form-item
      v-if="form.status==='r'"
      label="所属店铺"
      prop="subMchId"
      verify
    >
      <el-input
        v-model="form.data.subMchName"
        placeholder="请选择所属店铺"
      ></el-input>
    </el-form-item>
    <el-form-item
      v-else
      label="所属店铺"
      prop="subMchId"
      verify
    >
      <el-select
        style="width: 100%"
        v-model="form.data.subMchId"
        filterable
        placeholder="请选择所属店铺"
      >
        <el-option
          v-for="item in state.options.subMerchant"
          :key="item.subMchId"
          :label="item.name"
          :value="item.subMchId"
        />
      </el-select>
    </el-form-item>
    <!-- 规则：必选，1.最长100字符 -->
    <el-form-item label="商品名称" prop="name" verify>
      <el-input
        class="show-word-limit"
        v-model.trim="form.data.name"
        placeholder="请输入商品名称"
        :autosize="{ minRows: 1, maxRows: 4 }"
        show-word-limit
        maxlength="100"
      ></el-input>
    </el-form-item>
    <!-- 商品ID 详情时展示 -->
    <el-form-item
      label="商品ID"
      v-if="form.status==='r'"
      prop="id"
      verify
    >
      <el-input v-model.trim="form.data.id"/>
    </el-form-item>
    <!-- 券类型规则：必选 -->
    <el-form-item
      v-if="state.businessTypeId==='3'"
      label="券类型"
      prop="category"
      verify
    >
      <el-select
        style="width: 100%"
        v-model="form.data.category"
        placeholder="请选择券类型"
      >
        <el-option
          v-for="item in dict.coupons_product_type"
          :key="item.dataValue"
          :label="item.dataName"
          :value="item.dataValue"
        />
      </el-select>
    </el-form-item>
    <!-- 规则：可选填 -->
    <template v-if="'5'!==state.businessTypeId">
      <el-form-item
        label="费用说明"
        prop="packageContent"
      >
        <el-input
          class="show-word-limit"
          v-model="form.data.packageContent"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 2 }"
          maxlength="1000"
          show-word-limit
          placeholder="请输入费用说明"
        />
      </el-form-item>
      <!-- 规则：可选填 -->
      <el-form-item label="使用说明" prop="useRule">
        <el-input
          class="show-word-limit"
          v-model="form.data.useRule"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 2 }"
          maxlength="1000"
          show-word-limit
          placeholder="请输入使用说明"
        />
      </el-form-item>
    </template>
    <!-- 规则：可选填 -->
    <el-form-item v-if="['1','4'].includes(state.businessTypeId)" label="交通信息" prop="trafficInfo">
      <el-input
        class="show-word-limit"
        v-model="form.data.trafficInfo"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 2 }"
        maxlength="1000"
        show-word-limit
        placeholder="请输入交通信息"
      />
    </el-form-item>
    <template v-if="state.businessTypeId==='1'">
      <!-- 规则：可选填 -->
      <el-form-item
        label="入园方式"
        prop="enterWay"
        verify
      >
        <el-input
          class="show-word-limit"
          v-model="form.data.enterWay"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 2 }"
          maxlength="15"
          show-word-limit
          placeholder="请输入入园方式"
        />
      </el-form-item>
      <!-- 规则：可选填 -->
      <el-form-item label="优待政策" prop="preferlInfo">
        <el-input
          class="show-word-limit"
          v-model="form.data.preferlInfo"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 2 }"
          maxlength="1000"
          show-word-limit
          placeholder="请输入优待政策"
        />
      </el-form-item>
    </template>
    <!-- <el-form-item
      v-if="state.businessTypeId==='1'"
      label="关联预约景区"
      prop="scenicId"
    >
      <CurrentScenic v-model="form.data.scenicId"/>
      <form-item-tip>
        选择关联预约景区后，游客购票核销时，将自动检索并将预约订单同步为已入园状态
      </form-item-tip>
    </el-form-item> -->
    <!-- 规则：可选填，1. 最长4个标签 2. 每个标签限制字符长度4个 -->
    <el-form-item label="标签设置" prop="labels">
      <DynamicTag v-model="form.data.labels" objectKey="name"/>
    </el-form-item>
    <!-- 规则：可选填，默认值非热门推荐 - 0 -->
    <el-form-item label="热门推荐" prop="recommend">
      <el-switch
        v-model="form.data.recommend"
        :inactive-value="0"
        :active-value="1"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import mixin from './mixin'
import { mapGetters } from 'vuex'
import { state, mutations } from '../../store'
import DynamicTag from 'dynamic-tag'
import CurrentScenic from '../components/CurrentScenic.vue'
import CategorySelect from '@/components/CategorySelect/index.vue'

export default {
  name: 'BasicInfomation',
  mixins: [mixin],
  components: { DynamicTag, CurrentScenic, CategorySelect },
  computed: {
    ...mapGetters(['dict',]),
  },
  data () {
    return {}
  },
  watch: {
    'form.data.channelType': {
      immediate: true,
      handler (nv, o) {
        // 出票平台切换后，获取有没有多个景区使用该平台
        mutations.updateOptions(null, 'channelInfo')
        if (o !== undefined) {
          this.form.data.ticketSettingCode = ''
        }
        this.mateChannelInfo() // 匹配出票景区
        if (nv === 22) {
          this.initConsumerSetting(this.form.data.consumerSetting)
        } else {
          // 规则：云景票务平台不需要填票码，出票平台时云景票务平台时将票码字段置空
          nv === 1 && this.$set(this.form.data, 'productCode', undefined)
          // 当出票平台不是青岩古镇票务时，需要清除检票设置，否则后台会提示检票设置的一系列参数不能为空
          this.$set(this.form.data, 'consumerSetting', null)
        }
      }
    },
    'state.options.ticketChannel': {
      immediate: true,
      handler (n, o) {
        if (n?.length > 0) {
          this.mateChannelInfo() // 这里也要加是因为又是出票平台接口较慢，导致匹配不到景区
        }
      }
    },
  },
  methods: {
    // 匹配出票景区
    mateChannelInfo () {
      state.options.ticketChannel?.forEach(item => {
        if (item.channelType === this.form.data.channelType) {
          mutations.updateOptions(item, 'channelInfo')
          this.$forceUpdate()
        }
      })
    },
    /**
     * 设置检票设置默认值
     * @param {Object || Null }} target
     * @return Void
     */
    initConsumerSetting (target) {
      if (!target || !target.usageDays) {
        this.$set(this.form.data, 'consumerSetting', {})
        this.$set(this.form.data.consumerSetting, 'usageDays', 1)
        this.$set(this.form.data.consumerSetting, 'consumerWay', 1)
        this.$set(this.form.data.consumerSetting, 'usageCount', 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
